<template>
	<div class="warp">
		<el-row :gutter="24">
			<el-form ref="elForm" :model="formData" :rules="rules" size="medium " label-width="10px">
				<!-- 船名 -->
				<el-col :span="5">
					<el-form-item prop="field101" label-width="70px" label="船名">
						<el-select v-model="formData.field101" placeholder="请选择船名" clearable :style="{ width: '100%' }">
							<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<!-- 申请部门 -->
				<el-col :span="5">
					<el-form-item prop="field101" label-width="70px" label="部门">
						<el-select v-model="formData.field101" placeholder="请选择部门" clearable :style="{ width: '100%' }">
							<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<!-- 状态 -->
				<el-col :span="5">
					<el-form-item prop="field101" label-width="70px" label="状态">
						<el-select v-model="formData.field101" placeholder="请选择状态" clearable :style="{ width: '100%' }">
							<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<!-- 时间范围 -->
				<!-- <el-col :span="10">
					<el-form-item label-width="70px" label="时间范围" prop="field103">
						<el-date-picker
							type="daterange"
							v-model="formData.field103"
							format="yyyy-MM-dd"
							value-format="yyyy-MM-dd"
							:style="{ width: '100%' }"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							range-separator="至"
							clearable
						></el-date-picker>
					</el-form-item>
				</el-col> -->
			</el-form>
		</el-row>

		<el-button size="medium" icon="el-icon-search" type="primary" @click="submitForm">查询</el-button>
		<el-button size="medium" icon="el-icon-delete" @click="resetForm">重置</el-button>
		<el-button size="medium" icon="el-icon-plus" type="primary" @click="centerDialogVisible = true">新增</el-button>
		<el-dialog title="保养申请" :visible.sync="centerDialogVisible" width="40%" center>
			<div>
				<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
					<!-- 设备 -->
					<el-row :gutter="24" class="layout-items-center">
						<el-col :span="12">
							<el-form-item prop="field101" label="设备名称">
								<el-input v-model="formData.name"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="field101" label="保养类型">
								<el-select v-model="formData.field101" placeholder="请选择保养类型" clearable>
									<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- 申请部门 -->
						<el-col :span="12">
							<el-form-item prop="field101" label="负责人">
								<el-select v-model="formData.field101" placeholder="请选择负责人" clearable>
									<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="field101" label="保养周期">
								<el-select v-model="formData.field101" placeholder="请选择保养周期" clearable>
									<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="24">
							<el-form-item label="保养项目">
								<el-input type="textarea" v-model="formData.desc"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="保养要求">
								<el-input type="textarea" v-model="formData.desc"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
				<el-button @click="centerDialogVisible = false" style="margin-left: 100px">取 消</el-button>
			</div>
		</el-dialog>
		<el-table :data="tableData" style="width: 100%; margin: 20px 0" max-height="500" border>
			<el-table-column fixed type="index" label="#" width="50" align="center"> </el-table-column>
			<el-table-column fixed prop="date" label="保养年份" align="center"> </el-table-column>
			<el-table-column prop="province" label="船名" align="center"> </el-table-column>
			<el-table-column prop="city" label="部门" align="center"> </el-table-column>
			<el-table-column prop="type" label="保养项数" align="center"> </el-table-column>
			<el-table-column prop="address" label="申请类型" align="center"> </el-table-column>
			<el-table-column prop="zip" label="提交时间" align="center"> </el-table-column>
			<el-table-column prop="zip" label="状态" align="center"> </el-table-column>
			<el-table-column label="操作" width="210" fixed="right" align="center">
				<template slot-scope="scope">
					<el-button @click.native.prevent="drawer = true" size="medium" type="primary" plain>月度保养</el-button>

					<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="danger" plain size="medium">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-drawer title="月度保养" :visible.sync="drawer" :direction="direction" size="90%">
			<div class="block">
				<el-date-picker v-model="value2" type="month" placeholder="选择月"> </el-date-picker>
				<el-select v-model="formData.field101" placeholder="完成情况" clearable style="width: 20%; margin-left: 50px">
					<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
				</el-select>
				<div style="margin-top: 30px">
					<div class="row">设备名称： <a>船体部分</a></div>
					<div class="row">设备编号： <a>HS-0000-000-001</a></div>
					<div class="row">船舶： <a>华福油5</a></div>
					<div class="row">型号规格： <a></a></div>
					<div class="row">保养编号： <a>1.1</a></div>
					<div class="row">负责部门： <a>甲板部</a></div>
					<div class="row">保养类型： <a>一般</a></div>
					<div class="row">保养周期允差(日)： <a> ± 16</a></div>
					<div class="row">必须上传许可证： <a>可选</a></div>
					<div class="row">保养项目： <a>各层甲板、船壳板、上层建筑检查、除锈、油漆</a></div>
				</div>
			</div>
		</el-drawer>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					field101: undefined,
					field102: undefined,
					field103: undefined,
					field105: undefined,
					field106: [1],
				},
				rules: {
					field101: [],
					field102: [
						{
							message: "搜索关键字",
							trigger: "blur",
						},
					],
					field106: [],
				},
				field101Options: [
					{
						label: "大副",
						value: 1,
					},
					{
						label: "电工",
						value: 2,
					},
				],
				field106Options: [
					{
						label: "隐藏其他人草稿单",
						value: 1,
					},
				],
				checked: false,
				tableData: [
					{
						date: "SP-S25020601",
						name: "RA-25011901",
						province: "华福油",
						city: "轮机部",
						type: "自修",
						address: "紧急",
						zip: "2025-02-06",
					},
					{
						date: "压载舱",
						name: "RA-25011901",
						province: "华福油",
						city: " 轮机部",
						type: "厂修",
						address: "紧急",
						zip: "2025-02-06",
					},
					{
						date: "2016-05-04",
						name: "王小虎",
						province: "上海",
						city: "普陀区",
						address: "上海市普陀区金沙江路 1518 弄",
						zip: 200333,
					},
					{
						date: "2016-05-01",
						name: "王小虎",
						province: "上海",
						city: "普陀区",
						address: "上海市普陀区金沙江路 1518 弄",
						zip: 200333,
					},
					{
						date: "2016-05-08",
						name: "王小虎",
						province: "上海",
						city: "普陀区",
						address: "上海市普陀区金沙江路 1518 弄",
						zip: 200333,
					},
					{
						date: "2016-05-06",
						name: "王小虎",
						province: "上海",
						city: "普陀区",
						address: "上海市普陀区金沙江路 1518 弄",
						zip: 200333,
					},
					{
						date: "2016-05-07",
						name: "王小虎",
						province: "上海",
						city: "普陀区",
						address: "上海市普陀区金沙江路 1518 弄",
						zip: 200333,
					},
				],
				centerDialogVisible: false,
				radio: "1",
				isPreparation: false,
				isDisabled: false,
				drawer: false,
				direction: "rtl",
				value2: "",
			};
		},
		created() {},
		methods: {
			submitForm() {
				this.$refs["elForm"].validate((valid) => {
					if (!valid) return;
					// TODO 提交表单
				});
			},
			resetForm() {
				this.$refs["elForm"].resetFields();
			},
			isSelf(e) {
				console.log(e);
				if (e == 1) {
					this.isPreparation = true;
				} else {
					this.isPreparation = false;
				}
			},
			toSettlement() {
				this.$router.push({
					path: "/maintenance/settlement",
					params: {},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.warp {
		padding: 30px 20px;
		background-color: white;
		margin: 15px;
		border-radius: 20px;
		height: calc(100vh - 120px);
		overflow: auto;
	}
	.block {
		padding: 20px 30px;
		.row {
			font-size: 15px;
			font-weight: bold;
			color: #606266;
			line-height: 35px;
			box-sizing: border-box;
			a {
				font-size: 14px;
				font-weight: 400;
				color: #777;
			}
		}
	}
	::v-deep .el-date-editor.el-input {
		width: 300px;
	}
	// ::v-deep .el-select {
	// 	width: 20%;
	// 	margin-left: 50px;
	// }
</style>
